<template>
  <el-form :inline="true">
    <el-form-item label="名称">
      <el-input v-model="request.name" placeholder="请输入名称" clearable/>
    </el-form-item>
    <el-form-item label="编号">
      <el-input v-model="request.number" placeholder="请输入编号" clearable/>
    </el-form-item>
    <el-form-item label="分类">
      <el-select v-model="request.type" placeholder="请选择分类" clearable>
        <el-option v-for="item in state.mapList" :key="item.id" :label="item.value" :value="item.id"/>
      </el-select>
    </el-form-item>
    <el-form-item label="状态">
      <el-select v-model="request.status" placeholder="请选择状态" clearable>
        <el-option v-for="item in state.statusList" :key="item.key" :label="item.value" :value="item.key"/>
      </el-select>
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="search" icon="Search">搜索</el-button>
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="addType" icon="CirclePlus">新建分类</el-button>
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="add" icon="CirclePlus">新增项目</el-button>
    </el-form-item>
  </el-form>
  <el-table :data="state.list" row-key="id" :default-expand-all="true" border>
    <el-table-column prop="projectName" label="名称" width="300"/>
    <el-table-column prop="projectNum" label="编号" width="180"/>
    <el-table-column prop="mapValue" label="类型"></el-table-column>
    <el-table-column prop="beginTime" label="开始时间" width="170"></el-table-column>
    <el-table-column prop="overTime" label="结束时间" width="170"></el-table-column>
    <el-table-column prop="createdName" label="进度">
      <template #default="scope">
        <el-progress type="circle" :percentage="25" :width="50"></el-progress>
        <span v-show="false">{{ scope.row }}</span>
      </template>
    </el-table-column>
    <el-table-column label="状态">
      <template #default="scope">
        <el-tag :type="computedStatus(scope.row)">{{ scope.row.statusLabel }}</el-tag>
      </template>
    </el-table-column>
    <el-table-column label="操作" width="350">
      <template #default="scope">
        <el-button size="small" type="primary" @click="navProjectDetail(scope.row)">详情</el-button>
        <el-button size="small" type="warning" @click="editProject(scope.row)">编辑</el-button>
        <el-button size="small" type="primary" @click="addSonProject(scope.row)">新增子项目</el-button>
        <el-button size="small" type="danger" @click="navProjectDetail(scope.row)">删除</el-button>
      </template>
    </el-table-column>
  </el-table>
  <project-info :id="projectInfo.id" :type="projectInfo.type" :title="projectInfo.title" v-model="show.showProjectInfo"
                v-if="show.showProjectInfo" @save="save"></project-info>
  <Map v-model="show.showMap" v-if="show.showMap" :type="1" @save="queryMapListAsync"></Map>
</template>

<script>
import { onBeforeMount, reactive } from 'vue'
import { useRouter } from 'vue-router'
import projectInfo from '@/views/projectManage/components/projectInfo'
import { queryMapListUrl, queryProjectListUrl, queryProjectStatusListUrl } from '@/api/api'
import { get, post } from '@/utils/httpRequest'
import { convertListToTree } from '@/utils/util'
import Map from '@/components/map/map'

export default {
  name: 'projectManage',
  components: {
    Map,
    projectInfo
  },
  setup () {
    // 计算项目状态
    const computedStatus = (data) => {
      let type = ''
      switch (data.status) {
        case 1:
          type = ''
          break
        case 2:
          type = 'success'
          break
        case 3:
          type = 'warning'
          break
        case 4:
          type = 'info'
          break
        case 5:
          type = 'danger'
          break
      }
      return type
    }
    const state = reactive({
      list: [],
      // 分类列表
      mapList: [],
      // 状态列表
      statusList: []
    })
    const show = reactive({
      showProjectInfo: false,
      showMap: false
    })
    // 请求参数
    const request = reactive({
      name: null,
      type: null,
      number: null,
      status: null
    })
    // 查询项目状态枚举列表
    const queryProjectStatusAsync = async () => {
      const result = await get(queryProjectStatusListUrl, {})
      console.log(result)
      if (result.code === 200) {
        state.statusList = result.data
      }
    }
    // 查询项目分类map
    const queryMapListAsync = async () => {
      const result = await get(queryMapListUrl, { type: 1 })
      if (result.code === 200) {
        state.mapList = result.data
      }
    }
    const router = useRouter()
    const projectInfo = reactive({
      type: 0,
      id: 0,
      title: '项目详情'
    })
    // 添加项目
    const add = () => {
      projectInfo.title = '新增项目'
      projectInfo.type = 1
      projectInfo.id = 0
      show.showProjectInfo = true
    }
    // 新增子项目
    const addSonProject = (data) => {
      projectInfo.title = `新增【${data.projectName}】子项目`
      projectInfo.id = data.id
      projectInfo.type = 3
      show.showProjectInfo = true
    }
    const editProject = (data) => {
      projectInfo.title = `编辑【${data.projectName}】`
      projectInfo.id = data.id
      projectInfo.type = 2
      show.showProjectInfo = true
    }
    // 导航项目详情
    const navProjectDetail = (row) => {
      router.push({
        path: '/projectDetailManage',
        query: {
          id: row.id
        }
      })
    }
    // 搜索
    const search = () => {
      queryProjectListAsync()
    }
    // 查询项目列表
    const queryProjectListAsync = async () => {
      const result = await post(queryProjectListUrl, request)
      if (result.code === 200) {
        state.list = convertListToTree(result.data, 'id', 'parentId')
      }
    }
    // 保存项目详情成功
    const save = () => {
      queryProjectListAsync()
    }
    // 添加map类型
    const addType = () => {
      show.showMap = true
    }
    onBeforeMount(() => {
      queryMapListAsync()
      queryProjectStatusAsync()
      queryProjectListAsync()
    })
    return {
      editProject,
      addSonProject,
      projectInfo,
      search,
      queryMapListAsync,
      computedStatus,
      request,
      addType,
      show,
      state,
      save,
      add,
      navProjectDetail
    }
  }

}
</script>

<style scoped>

</style>
